<template>
  <div>
    <el-card>
      <div id="topCard">
        <p>筛选部分</p>
        <div>
          <span>状态: </span>
          <el-select
            v-model="optionalParam.status"
            style="width: 240px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <span>板块: </span>
          <el-select
            v-model="optionalParam.sectionId"
            style="width: 240px"
          >
            <el-option
              v-for="item in boardListOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button
          style="width: 240px"
          :loading="getListLoading"
          type="primary"
          @click="getList"
        >
          筛选
        </el-button>
      </div>
    </el-card>
    <el-card>
      <el-skeleton
        v-show="getListLoading"
        :rows="5"
        animated
      />
      <el-table
        v-show="!getListLoading"
        :data="postList"
        border
        style="width: 100%"
      >
        <el-table-column
          label="图片"
          prop="files"
          align="center"
          width="200px"
        >
          <template #default="scope">
            <span v-if="scope.row.files.length === 0">无图片</span>
            <div
              v-for="file in scope.row.files"
              :key="file"
            >
              <img
                :src="`${file.fileUrl}`"
                style="width: 150px; height: 100px"
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100px"
        >
          <template #default="scope">
            <span v-if="scope.row.status === 0">未审核</span>
            <span v-else-if="scope.row.status === 1">审核通过</span>
            <span v-else-if="scope.row.status === 2">置顶加精</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
          width="100px"
        />
        <el-table-column
          prop="content"
          label="内容"
          width="200px"
        >
          <template #default="scope">
            <contentDialogButton
              :title="scope.row.title"
              :content="scope.row.content"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="like"
          label="点赞"
          width="70px"
        />
        <el-table-column
          prop="favor"
          label="收藏"
          width="70px"
        />
        <el-table-column
          prop="view"
          label="浏览量"
          width="80px"
        />
        <el-table-column
          prop="userName"
          label="发布人"
          width="100px"
        />

        <el-table-column
          prop="startTime"
          label="开始时间"
          width="130px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="endTime"
          label="结束时间"
          width="130px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="130px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="130px"
          show-overflow-tooltip
        />

        <el-table-column
          label="操作"
          fixed="right"
        >
          <template #default="operate">
            <div style="display: flex; flex-direction: column; gap: 10px">
              <changePostButton
                v-if="operate.row.status !== 0"
                :post-id="operate.row.postId"
                :title="operate.row.title"
                :tags="operate.row.tags"
                :files="operate.row.files == [] ? null : operate.row.files"
                :content="operate.row.content"
                :start-time="operate.row.startTime"
                :end-time="operate.row.endTime"
                @work-end="getList"
              />
              <el-button
                v-if="operate.row.status === 0"
                :loading="passLoading"
                class="Button"
                type="success"
                size="small"
                @click="handlePass(operate.row)"
              >
                过审
              </el-button>
              <el-button
                v-if="operate.row.status !== 2"
                :loading="topLoading"
                class="Button"
                type="success"
                size="small"
                @click="handlTop(operate.row)"
              >
                加精
              </el-button>
              <el-button
                :loading="hideLoading"
                class="Button"
                type="warning"
                size="small"
                @click="handlHide(operate.row)"
              >
                隐藏
              </el-button>
              <el-button

                :loading="deleteLoading"
                class="Button"
                type="danger"
                size="small"
                @click="handleDelete(operate.row)"
              >
                删除
              </el-button>
              <el-button
                class="Button"
                type="info"
                size="small"
                @click="goToComment(operate.row.postId)"
              >
                查看回复
              </el-button>
              <addToImgIndex
                :add-or-update-visible="addImgIndex"
                :post-id="operate.row.postId"
                @work-end="closeAddImgIndex"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="margin-top: 0.5rem">
      <el-pagination
        v-show="totalPage > 0"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="requiredParam.pageNum"
        :page-size="requiredParam.pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script setup>
import contentDialogButton from './components/content-dialog-button.vue'
import changePostButton from './components/change-post-button.vue'
import addToImgIndex from './components/add-or-update-img-index.vue'
import * as api from '@/api/platform/post'
import * as boardApi from '@/api/point/board'
// 传递postId
import { useRouter } from 'vue-router'
const router = useRouter()
function goToComment (postId) {
  router.push({
    path: '/platform/comment',
    state: { postId }
  })
}

const addImgIndex = ref(false)
function closeAddImgIndex () {
  addImgIndex.value = false
}

const boardList = ref([
  {
    createTime: '2024-04-16 01:58:08',
    updateTime: '2024-04-28 20:52:58',
    sectionId: 0,
    name: '加载中',
    pic: null,
    icon: null,
    description: '发布各类文创产品',
    type: 0,
    sort: 0
  }
])

const boardListOptions = ref([])
const postList = ref([])
const totalPage = ref(0)
const statusOptions = [
  {
    value: '',
    label: '显示全部'
  },
  {
    value: 0,
    label: '只显示未审核'
  },
  {
    value: 1,
    label: '只显示审核通过'
  },
  {
    value: 2,
    label: '只显示置顶加精'
  }
]
const requiredParam = reactive({
  pageSize: 10,
  pageNum: 1
})
const optionalParam = reactive({
  status: '',
  sectionId: '加载中...',
  sysType: 0
})

function sizeChangeHandle (pageSize) {
  requiredParam.pageSize = pageSize
  getList()
}

function currentChangeHandle (pageNum) {
  requiredParam.pageNum = pageNum
  getList()
}

const deleteLoading = ref(false)

function handleDelete (data) {
  deleteLoading.value = true
  api
    .deletePost({
      postId: data.postId
    })
    .then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getList()
    })
    .catch(() => {
      ElMessage.error('操作失败')
      deleteLoading.value = false
    })
}

const passLoading = ref(false)

function handlePass (data) {
  passLoading.value = true
  api
    .passPost({
      postId: data.postId
    })
    .then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getList()
    })
    .catch(() => {
      ElMessage.error('操作失败')
      passLoading.value = false
    })
}

const hideLoading = ref(false)

function handlHide (data) {
  hideLoading.value = true
  api
    .hidePost({
      postId: data.postId
    })
    .then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getList()
    })
    .catch(() => {
      ElMessage.error('操作失败')
      hideLoading.value = false
    })
}

const topLoading = ref(false)

function handlTop (data) {
  topLoading.value = true
  api
    .topPost({
      postId: data.postId
    })
    .then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getList()
    })
    .catch(() => {
      ElMessage.error('操作失败')
      topLoading.value = false
    })
}

const getListLoading = ref(true)

async function getBoard () {
  // 获取板块的分类
  // 要使用then必须把函数也返回
  return boardApi.getBoard({
    type: 1
  }).then((res) => {
    boardList.value = res
    boardListOptions.value = boardList.value.map(item => ({
      label: item.name,
      value: item.sectionId
    }))
    optionalParam.sectionId = boardListOptions.value[0].value
    return 0
  }).catch(() => {
    ElMessage.error('获取失败')
  })
}
function getList () {
  getListLoading.value = true
  const temp = JSON.parse(JSON.stringify(optionalParam))
  if (temp.status === '') {
    delete temp.status
  }
  api
    .getPost({
      ...requiredParam,
      ...temp
    })
    .then((res) => {
      postList.value = res.list
      totalPage.value = res.total
      getListLoading.value = false
      passLoading.value = false
      topLoading.value = false
      hideLoading.value = false
      deleteLoading.value = false
    })
    .catch((err) => {
      ElMessage.error(err)
      getListLoading.value = false
      passLoading.value = false
      topLoading.value = false
      hideLoading.value = false
      deleteLoading.value = false
    })
}
async function getData () {
  getBoard().then((val) => {
    if (val == 0) {
      getList()
    }
  })
}
onMounted(() => {
  getData()
})
</script>

<style scoped>
.Button {
  margin-left: 0px;
}
#topCard {
  display: flex;
  flex-direction: column;
  gap: 10px
}
</style>
